<template>
  <div>
    <div id="main">
      <div
        style="width: 102px; height: 125px; background: #ffffff; z-index: 3"
      ></div>
      <div id="d1">
        <div id="d11">&lt;</div>
        <div id="d12">
          <div class="d121 d120">
            <div class="ddd">
              <img src="https://www.jq22.com/img/cs/500x300-1.png" />
            </div>
          </div>
          <div class="d122 d120">
            <div class="ddd">
              <img src="https://www.jq22.com/img/cs/500x300-1.png" />
            </div>
          </div>
          <div class="d121 d120">
            <div class="ddd">
              <img src="https://www.jq22.com/img/cs/500x300-1.png" />
            </div>
          </div>
          <div class="d122 d120">
            <div class="ddd">
              <img src="https://www.jq22.com/img/cs/500x300-1.png" />
            </div>
          </div>
          <div class="d121 d120">
            <div class="ddd">
              <img src="https://www.jq22.com/img/cs/500x300-1.png" />
            </div>
          </div>
          <div class="d122 d120">
            <div class="ddd">
              <img src="https://www.jq22.com/img/cs/500x300-1.png" />
            </div>
          </div>
          <div class="d121 d120">
            <div class="ddd">
              <img src="https://www.jq22.com/img/cs/500x300-1.png" />
            </div>
          </div>
          <div class="d122 d120">
            <div class="ddd">
              <img src="https://www.jq22.com/img/cs/500x300-1.png" />
            </div>
          </div>
          <div class="d121 d120">
            <div class="ddd">
              <img src="https://www.jq22.com/img/cs/500x300-1.png" />
            </div>
          </div>
          <div class="d122 d120">
            <div class="ddd">
              <img src="https://www.jq22.com/img/cs/500x300-1.png" />
            </div>
          </div>
        </div>
        <div id="d13">&gt;</div>
      </div>
      <div
        style="width: 102px; height: 125px; background: #ffffff; z-index: 3"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    let $ = function (id) {
      return document.getElementById(id);
    };

    //移动的宽度
    var moveLength = 0;
    // 定时器，每个3秒移动一次
    setInterval(function () {
      moveLength += 207;
      if (moveLength <= 1035) {
        //是否移动到尽头
        $('d12').style = 'transform:translateX(-' + moveLength + 'px);';
      } else if (moveLength > 1035) {
        //是否移动到尽头
        moveLength -= 1242;
        $('d12').style = 'transform:translateX(-' + moveLength + 'px);';
      }
    }, 3000);
    // 左移
    $('d11').addEventListener('click', function () {
      // 首先判断图片是不是移动过了，是否移到尽头，然后再做调整移动的宽度
      if (moveLength === 1035) {
        //是否移到了尽头
        $('d12').style = 'transform:translateX(-' + moveLength + 'px);';
        moveLength -= 207;
        $('d12').style = 'transform:translateX(-' + moveLength + 'px);';
      } else if (moveLength > 0 && moveLength < 1035) {
        //是否在原点与尽头之间
        moveLength -= 207;
        $('d12').style = 'transform:translateX(-' + moveLength + 'px);';
      } else if (moveLength === 0) {
        //是否回到原点
        moveLength -= 207;
        moveLength += 207;
      }
    });
    // 右移
    $('d13').addEventListener('click', function () {
      moveLength += 207;
      // 判断移动的宽度有没有超出5张图片的宽度，如果超出，则减掉一张图片的宽度
      if (moveLength <= 1035) {
        $('d12').style = 'transform:translateX(-' + moveLength + 'px);';
      } else if (moveLength > 1035) {
        moveLength -= 207;
      }
    });
  },
  methods: {},
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#main {
  width: 100%;
  height: 125px;
  display: flex;
  margin-top: 120px;
}
#d1 {
  width: 1162px;
  height: 125px;
  display: flex;
  overflow: hidden;
}
#d11 {
  width: 64px;
  height: 125px;
  line-height: 125px;
  text-align: center;
  font-size: 28px;
  cursor: pointer;
  z-index: 2;
  background: #ffffff;
}
#d13 {
  width: 64px;
  height: 125px;
  line-height: 125px;
  text-align: center;
  font-size: 28px;
  cursor: pointer;
  z-index: 2;
  background: #ffffff;
}
#d12 {
  /*元素个数*207(div宽度)  动态算 828px[4个元素] 1035px[5个元素]  1242px[6个元素]  2070px[10个元素]
      用JS动态设置改值
      */
  /*先预设足够放10张图片的宽度*/
  width: 2070px;
  height: 125px;
  /*使用弹性布局排列*/
  display: flex;
  transition: all 0.3s linear 0s;
  /*再将多出来的5张图片的宽度用负边距隐藏起来*/
  margin-right: -1035px;
}
#d12 .d120 {
  width: 207px;
  height: 125px;
  z-index: 1;
}
.ddd {
  width: 170px;
  height: 80px;
  margin-left: 18px;
  margin-top: 23px;
}
.ddd img {
  width: 100%;
  height: 100%;
}
</style>
